<template>
  <view>
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" :title="programName" />
    </view>
    <view class="backwall">
      <image :src="program.cover" mode=""></image>
    </view>
    <view class="card">
      <view class="card-header">
        <text class="title">{{program.name}}</text>
      </view>
      <view class="card-content">
        <view class="price-container">
          <text class="price">{{( program.price/100).toFixed(2)}}</text>
          <text class="unit">元/次</text>
        </view>
        <text class="more-info">{{program.recommend}}</text>
      </view>
    </view>
    <view class="service-content">
      <image :src="program.serviceContent" mode="widthFix"></image>
    </view>
    <view class="cart">
      <uni-goods-nav :fill="true" :options="options" @click="onClick" :buttonGroup="buttonGroup"
        @buttonClick="buttonClick" />
    </view>
    <view class="com-service">
      <image class="service" @tap="openComService" src="/static/images/service/kefu.png" />
      <view>
        客服咨询
      </view>
    </view>
    <uni-popup ref="comservice" type="bottom" background-color="transparent">
      <cust-service @closePop="closeComService"></cust-service>
    </uni-popup>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    ref
  } from 'vue';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  const options = ref([])
  const buttonGroup = ref([{
    text: '立即下单',
    backgroundColor: '#2abbaf',
    color: '#fff'
  }])

  const program = ref({
    cover: null
  })
  const programName = ref()
  //加载页面
  onLoad(async (option) => {
    const programId = option.programId
    programName.value = option.programName
    //获取项目背景图
    const result = await http.getRequest("/peizhen/open-city/program/get", {
      id: programId
    })
    if (result.code == 0) {
      program.value = result.data
    } else {
      uni.showToast({
        title: '获取服务失败',
        icon: 'error',
        duration: 1000
      })
    }
  })

  function goback() {
    uni.navigateBack()
  }
  //下单
  function buttonClick(e) {
    console.log(e);
    if(program.value.id==11){
      uni.navigateTo({
        url: `/pages/order/take-order/take-medicine-order?programId=${program.value.id}`
      })
    }else{
      uni.navigateTo({
        url: `/pages/order/take-order/take-order?programId=${program.value.id}`
      })
    }
  
  }
  const comservice = ref(null)
  function openComService() {
    if (comservice.value) {
      comservice.value.open()
    }
  }
  function closeComService() {
    if (comservice.value) {
      comservice.value.close()
    }
  }

</script>

<style lang="scss">
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .backwall image {
    width: 750rpx;
    height: 500rpx;
  }

  .card {
    position: absolute;
    top: 500rpx;
    border: 3rpx solid #ccc;
    border-radius: 14rpx;
    padding: 17rpx;
    margin: 17rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  }



  .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
  }

  .card-content {
    line-height: 1.6;
  }



  .price-container {
    display: flex;
    align-items: center;
    margin-top: 17rpx;
  }

  .price {
    font-size: 42rpx;
    color: #2abbaf;
    font-weight: bold;
    margin-right: 8.5rpx;
  }

  .unit {
    font-size: 25rpx;
    color: #999;
  }

  .more-info {
    font-size: 28rpx;
    color: #666;
    margin-top: 18rpx;
  }

  .service-content {
    margin-top: 100rpx;
    padding: 10rpx;
  }

  .service-content image {
    width: 100%;
    margin-bottom: 100rpx;
  }

  .cart {
    position: fixed;
    bottom: 50rpx;
    width: 100%;
  }
  .com-service {
    position: fixed;
    bottom: 150rpx;
    right: 20rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: 700;
    color: #22b9a3;
    .service {
      width: 150rpx;
      height: 150rpx;
    }
  }
</style>